<template>
	<view>
		<u-navbar :title="$t('merchant.navText')" placeholder :autoBack="true" bgColor="#fff"></u-navbar>
		<view class="content">
			<view class="content_title">
				<image src="/static/image/merchant_1.png"></image>
				<view>{{$t('merchant.basicsTitle')}}</view>
				<view>({{$t('merchant.required')}})</view>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.license')}}</view>
			</view>
			<image class="image" mode="aspectFill" @click="uploadImage('license')" :src="form.business_license?imgUrl+form.business_license:'/static/image/merchant_2.png'"></image>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.sopraporta')}}</view>
			</view>
			<image class="image" mode="aspectFill" @click="uploadImage('avatar')" :src="form.avatar?imgUrl+form.avatar:'/static/image/merchant_3.png'"></image>
			
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.publicity')}}</view>
			</view>
			<u-upload :fileList="fileList1" width="160" height="98" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6">
					<image src="/static/image/merchant_3.png"  mode="widthFix" style="width: 160px;height: 98px;"></image>
			</u-upload>
			<view class="title m-top-20">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_1')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_1')" :adjustPosition="false" border="none" v-model="form.name" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_2')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_2')" :adjustPosition="false" border="none" v-model="form.mobile" />
			</view>
			<view class="content_title">
				<image src="/static/image/merchant_4.png"></image>
				<view>{{$t('merchant.canteenTitle')}}</view>
				<view>({{$t('merchant.required')}})</view>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_3')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_3')" :adjustPosition="false" border="none" v-model="form.shopname" />
			</view>
			<view class="title">
				<view>{{$t('merchant.input_3_a')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_3')" :adjustPosition="false" border="none" v-model="form.shopname_copy" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_4')}}</view>
			</view>
			<view class="input grid_2">
				<u--input :placeholder="$t('merchant.searchInput_4')" :adjustPosition="false" border="none" v-model="form.address" />
				<view class="icon" @click="onMap">
					<u-icon name="map-fill" size="20"></u-icon>
				</view>
			</view>
			<view class="title">
				<view>{{$t('merchant.input_4_a')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_4')" :adjustPosition="false" border="none" v-model="form.address_copy" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_5')}}</view>
			</view>
			<view class="input">
				<u--input  :placeholder="$t('merchant.searchInput_5')" :adjustPosition="false" border="none" v-model="form.tel" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_15')}}</view>
			</view>
			<picker mode="time" @change="event => form.shop_starttime = event.detail.value">
				<view class="input">
					<u--input disabled disabledColor="#fff" :placeholder="$t('merchant.searchInput_15')" :adjustPosition="false" border="none" v-model="form.shop_starttime" />
				</view>
			</picker>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_16')}}</view>
			</view>
			<picker mode="time" @change="event => form.shop_endtime = event.detail.value">
				<view class="input">
					<u--input disabled disabledColor="#fff" :placeholder="$t('merchant.searchInput_15')" :adjustPosition="false" border="none" v-model="form.shop_endtime" />
				</view>
			</picker>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_6')}}</view>
			</view>
			<view class="grid_4">
				<view class="grid_item" :class="[form.category_id==item.id?'active':'']" @click="form.category_id=item.id" v-for="(item,index) in category" :key="index">{{language=='zh'?item.name:item.name_copy}}</view>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_7')}}</view>
			</view>
			<view class="grid_4">
				<view class="grid_item"  :class="[item.show?'active':'']" v-for="(item,index) in label" @click="getLabel(item)" :key="index">{{language=='zh'?item.name:item.name_copy}}</view>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_8')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_8')" :adjustPosition="false" border="none" v-model="form.characteristic" />
			</view>
			<view class="title">
				<!-- <view class="xing">*</view> -->
				<view>{{$t('merchant.input_8_a')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_8')" :adjustPosition="false" border="none" v-model="form.characteristic_copy" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_9')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_9')" :adjustPosition="false" border="none" v-model="form.specialty" />
			</view>
			<view class="title">
				<view>{{$t('merchant.input_9_a')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_9')" :adjustPosition="false" border="none" v-model="form.specialty_copy" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_10')}}</view>
			</view>
			<view class="grid_4">
				<view class="grid_item" :class="[item.show?'active':'']" @click="getServe(item)" v-for="(item,index) in serveList" :key="index">{{language=='zh'?item.name:item.name_copy}}</view>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_12')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_12')" :adjustPosition="false" border="none" v-model="form.table_num" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_14')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('merchant.searchInput_14')" :adjustPosition="false" border="none" v-model="form.box_num" />
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('merchant.input_13')}}</view>
			</view>
			<view class="grid_4">
				<view class="grid_item" :class="[item.show?'active':'']" @click="getRoom(item)" v-for="(item,index) in roomList" :key="index">{{language=='zh'?item.name:item.name_copy}}</view>
			</view>
			<u-button :text="$t('merchant.submitBtn')" shape="circle" @click="submit" :customStyle="btnStyle"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>  
</template>

<script>
	import graceChecker from '@/mixins/formVerify.js'
	export default {
		data() {
			return {
				fileList1:[],
				imgUrl:this.$DOMAIN_URL,
				typeList: [],
				btnStyle: {
					background: "#FFC100",
					border: "none",
					height: "80rpx",
					color: "#fff",
					width: "90%",
					margin: "40px auto"
				},
				form: {
					business_license:"",//营业执照
					avatar:"",//门头照
					name:"",//负责人姓名
					mobile:"",//负责人联系方式
					shopname:"",//店铺名称 汉语
					shopname_copy:"",//店铺名称 维语
					address:"",//餐厅地址 汉语
					address_copy:"",//餐厅地址 维语
					location:"",//经纬度
					tel:"",//餐厅电话 
					city:"",//省市
					category_id:"",//餐厅类型
					label:[],//餐厅标签
					characteristic:"",//餐厅特色  汉语
					characteristic_copy:"",//餐厅特色  维语
					specialty:"",//餐厅招牌菜  汉语
					specialty_copy:"",//餐厅招牌菜 维语
					service_ids:[],//餐厅服务
					table_num:"",//餐桌数量
					box_num:"",//包厢数量
					box_ids:[],//包厢设置
					shop_starttime:"",//开始营业时间
					shop_endtime:"",//结束营业时间
					images:[]
				},
				rule: {
					business_license:{
						type: String,
						required: true,
						message: "请上传营业执照"
					},
					avatar:{
						type: String,
						required: true,
						message: "请上传店铺门头"
					},
					images:{
						type: Array,
						required: true,
						message: "请上传餐厅宣传图片"
					},
					name:{
						type: String,
						required: true,
						message: "请输入负责人姓名"
					},
					mobile:{
						type: String,
						required: true,
						message: "请输入负责人联系方式"
					},
					shopname:{
						type: String,
						required: true,
						message: "请输入餐厅名称(汉语)"
					},
					shopname_copy:{
						type: String,
						required: false,
						message: "请输入餐厅名称(维语)"
					},
					address:{
						type: String,
						required: true,
						message: "请选择餐厅地址(汉语)"
					},
					address_copy:{
						type: String,
						required: false,
						message: "请输入餐厅地址(维语)"
					},
					tel:{
						type: String,
						required: true,
						message: "请输入餐厅联系方式"
					},
					shop_starttime:{
						type: String,
						required: true,
						message: "请选择开始营业时间"
					},
					shop_endtime:{
						type: String,
						required: true,
						message: "请选择结束营业时间"
					},
					category_id:{
						type: String,
						required: true,
						message: "请选择餐厅类型"
					},
					label:{
						type: Array,
						required: true,
						message: "请选择餐厅标签"
					},
					characteristic:{
						type: String,
						required: true,
						message: "请输入餐厅特色(汉语)"
					},
					characteristic_copy:{
						type: String,
						required: false,
						message: "请输入餐厅特色(维语)"
					},
					specialty:{
						type: String,
						required: true,
						message: "请输入餐厅招牌菜(汉语)"
					},
					specialty_copy:{
						type: String,
						required: false,
						message: "请输入餐厅招牌菜(维语)"
					},
					service_ids:{
						type: Array,
						required: false,
						message: "请选择餐厅服务"
					},
					table_num:{
						type: String,
						required: true,
						message: "请输入餐桌数量"
					},
					box_num:{
						type: String,
						required: true,
						message: "请输入包厢数量"
					},
					box_ids:{
						type: Array,
						required: true,
						message: "请选择包厢设施"
					}
				},
				category: [], //餐厅类型
				label: [], //餐厅标签
				roomList: [], //配套设置
				serveList:[] ,//餐厅服务
				type:""
			};
		},
		onLoad(event) {
			this.getType()
			this.type = event.type
		},
		computed: {
			language() {
				return this._i18n.locale
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.form.images.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$IMG_URL + 'common/upload',
						filePath: url,
						name: 'file',
						header:{
							token:uni.getStorageSync('token')
						},
						success: (res) => {
							let info =  JSON.parse(res.data)
							if(info.code == 1){
								this.form.images.push(info.data.url)
								resolve(info.data.fullurl)
							}
						}
					});
				})
			},
			getUser(){
				this.$http.get('wanlshop/shop/repeatApply').then(res=>{
					if(res.code==1){
						this.form.business_license = res.data.auth.business_license
						this.form.avatar = res.data.auth.avatar
						this.form.name = res.data.auth.name
						this.form.mobile = res.data.auth.mobile
						this.form.shopname = res.data.auth.shopname
						this.form.shopname_copy = res.data.auth.shopname_copy
						this.form.address = res.data.auth.address
						this.form.address_copy = res.data.auth.address_copy
						this.form.location = res.data.auth.location
						this.form.tel = res.data.auth.tel
						this.form.category_id = res.data.auth.category
						this.form.shop_starttime = res.data.auth.shop_starttime
						this.form.shop_endtime = res.data.auth.shop_endtime
						// 餐厅标签
						let labeList = res.data.auth.label.split(",")
						this.label.forEach(item=>{
							labeList.forEach(e=>{
								if(item.id === parseInt(e)){
									item.show = true
									this.form.label.push(item.id)
								}
							})
						})
						this.form.characteristic = res.data.auth.characteristic
						this.form.characteristic_copy = res.data.auth.characteristic_copy
						this.form.specialty = res.data.auth.specialty
						this.form.specialty_copy = res.data.auth.specialty_copy
						// 餐厅服务
						let serviceList = res.data.auth.service_ids.split(",")
						this.serveList.forEach(item=>{
							serviceList.forEach(e=>{
								if(item.id === parseInt(e)){
									item.show = true
									this.form.service_ids.push(item.id)
								}
							})
						})
						this.form.table_num = res.data.auth.table_num
						this.form.box_num = res.data.auth.box_num
						// 配套设置
						let boxList = res.data.auth.box_ids.split(",")
						this.roomList.forEach(item=>{
							boxList.forEach(e=>{
								if(item.id === parseInt(e)){
									item.show = true
									this.form.box_ids.push(item.id)
								}
							})
						})
						this.form.images = res.data.auth.images.split(",")
						this.form.images.forEach(item=>{
							this.fileList1.push({url: this.imgUrl + item})
						})
					}
				})
			},
			uploadImage(type){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: "加载中...",
							mask:true
						})
						uni.uploadFile({
							url: this.$IMG_URL + 'common/upload',
							filePath: tempFilePaths[0],
							header: {
								token: uni.getStorageSync('token')
							},
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading()
								const res = JSON.parse(uploadFileRes.data)
								if (res.code == 1) {
									type == 'license' ? this.form.business_license = res.data.url :this.form.avatar = res.data.url
								}
							}
						});
					}
				});
			},
			getLabel(item){
				item.show=!item.show
				if(item.show){
					this.form.label.push(item.id)
				}else{
					let index = this.form.label.findIndex(e=>e==item.id)
					this.form.label.splice(index,1)
				}
			},
			getRoom(item){
				item.show=!item.show
				if(item.show){
					this.form.box_ids.push(item.id)
				}else{
					let index = this.form.box_ids.findIndex(e=>e==item.id)
					this.form.box_ids.splice(index,1)
				}
			},
			getServe(item){
				item.show=!item.show
				if(item.show){
					this.form.service_ids.push(item.id)
				}else{
					let index = this.form.service_ids.findIndex(e=>e==item.id)
					this.form.service_ids.splice(index,1)
				}
			},
			getType() {
				this.$http.get('wanlshop/shop/apply').then(res => {
					if (res.code == 1) {
						this.category = res.data.category.map(item => ({
							...item,
							show: false
						}))
						this.label = res.data.label.map(item => ({
							...item,
							show: false
						}))
						this.roomList = res.data.roomList.map(item => ({
							...item,
							show: false
						}))
						this.serveList = res.data.serviceList.map(item=>({
							...item,
							show: false
						}))
						this.type == 'edit' ? this.getUser() : ''
					}
				})
			},
			onMap() {
				// if(!this.form.address){
					uni.chooseLocation({
						success: (res) => {
							this.form.address = res.address + res.name
							this.form.location = res.longitude + ',' + res.latitude
						}
					})
				// }
			},
			submit() {
				let transit = graceChecker.RuleValidation(this.form, this.rule);
				if (transit) {
					if(!this.checkMobile(this.form.mobile)) return uni.$u.toast('手机号格式不正确')
					uni.showLoading({
						title: "加载中...",
						mask:true
					})
					this.form.label = this.form.label.toString()
					this.form.service_ids = this.form.service_ids.toString()
					this.form.box_ids = this.form.box_ids.toString()
					this.form.images = this.form.images.toString()
					let url = ""
					this.type == 'add'? url = "wanlshop/shop/apply" : url = "wanlshop/shop/repeatApply"
					this.$http.post(url, this.form).then(res => {
						uni.hideLoading()
						if (res.code == 1) {  
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: "提交成功",
									duration: 1000,
									complete() {
										uni.navigateBack()
									}
								})
							}, 150)
						}
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.icon{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.grid_2{
		display: grid;
		grid-template-columns: auto 20px;
		grid-column-gap: 20rpx;
		align-items: center;
	}
	.content {
		padding: 24rpx;

		.content_title {
			display: flex;
			align-items: center;
			color: #0a1629;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 40rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.title {
			display: flex;
			color: rgba(33, 33, 33, 1);
			font-size: 30rpx;
			margin-bottom: 28rpx;

			.xing {
				color: rgba(255, 48, 48, 1);
				font-size: 32rpx;
				margin-right: 10rpx;
			}
		}

		.image {
			width: 320rpx;
			height: 196rpx;
			margin-bottom: 40rpx;
		}

		.input {
			border: 1px solid rgba(227, 229, 232, 1);
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 40rpx;
		}

		.grid_3 {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-column-gap: 20rpx;
			grid-row-gap: 20rpx;

			.cuisine {
				width: 100%;
				height: 200rpx;
				border-radius: 20rpx;
				background: #fffcf2;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;

				.cuisine_text {
					color: rgba(166, 162, 151, 1);
					width: 100%;
					margin-top: -50rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}

		.grid_4 {
			display: grid;
			grid-column-gap: 20rpx;
			grid-template-columns: repeat(4, 1fr);
			grid-row-gap: 20rpx;
			margin-bottom: 40rpx;

			.grid_item {
				background: rgba(248, 248, 248, 1);
				border: 2rpx solid rgba(248, 248, 248, 1);
				border-radius: 10rpx;
				color: rgba(97, 97, 97, 1);
				font-size: 28rpx;
				padding: 12rpx 22rpx;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.active {
				border: 2rpx solid rgba(255, 193, 2, 1) !important;
				color: rgba(255, 193, 2, 1) !important;
				background: rgba(255, 252, 242, 1) !important;
			}
		}
	}
</style>
